<template>
	<view class="addr-pick-model" style="height: 100%;" v-if="show" @tap="close()">
		<view class="addr-pick-white"  @tap.stop="closeStop()">
			<view class="addr-pick-head">
				<view class="addr-pick-head-left">
					<text class="addr-pick-cancle"  @tap="close()">取消</text>
				</view>
				<text class="addr-pick-true" @tap="trueSelect()">确定</text>
			</view>
			<picker-view  indicator-style="height:50px" :value="value" @change="bindChange" @pickstart="pickstart" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in province" :key="index">{{item.label}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in city" :key="index">{{item.label}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in area" :key="index">{{item.label}}</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>

<script>
	import pro from '@/static/js/province.js';
	import city from '@/static/js/city.js';
	import area from '@/static/js/area.js';
	
	export default {
		props:{
			isshow:{
				type:Boolean,
				default:function(){
					isshow:false
				}
			}
		},
		watch:{
			isshow(){
				this.show=this.isshow
			},
			immediate:true
		},
		data(){
			return {
				province : pro,
				city : city[0],
				area : area[0][0],
				value:[11,0,0],
				windowHeight : '',
				show:this.isshow
			}
		},
		mounted() {
			this.initAddress();
			var sys = uni.getSystemInfoSync();
			this.windowHeight =sys.windowHeight;
		},
		methods:{
			//关闭
			close(){
				// this.show = false;
				this.$emit("close")
			},
			closeStop(e){
				// #ifdef APP-NVUE
				e.stopPropagation()
				// #endif
			},
			//确定选择
			trueSelect(){
				var province = this.province[this.value[0]].label;
				var city = this.city[this.value[1]].label;
				var area = this.area[this.value[2]].label;
				var res = [province,city,area];
				this.$emit('change',res);
				this.close();
			},
			//打开
			open(){
				this.show = true;
			},
			//初始化省市区
			initAddress(){
				this.city = city[this.value[0]];
				this.area = area[this.value[0]][this.value[1]];
			},
			bindChange(e){
				var new_data = e.detail.value;
				if(this.value[0] != new_data[0]) {
					this.value = [new_data[0],0,0];
				} else {
					if(this.value[1] != new_data[1]) {
						this.value = [new_data[0],new_data[1],0];
					} else {
						this.value = new_data;
					}
				}
				this.initAddress();
			},
			pickstart(e){
				console.log(233)
			}
		}
	}
</script>

<style>
.picker-view{
	width: 750upx;
	height: 600upx;
}
.addr-pick-white{
	width: 750upx;
	height: 700upx;
	position: absolute;
	bottom: 0upx;
	left: 0;
	background-color: #FFFFFF;
}
.item {
	height: 50px;
	display: flex;
	line-height: 50px;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.addr-pick-model{
	position: fixed;
	left: 0;
	width: 750upx;
	background-color: rgba(0,0,0,0.5);
	z-index: 9999;
	top:0;
}
.addr-pick-head{
	display: flex;
	width: calc(100% - 40upx);
	height: 100upx;
	flex-flow:row;
	align-items: center;
	padding: 0 20upx;
	border-bottom:1upx solid #f1f1f1
}
.addr-pick-head-left{
	flex: 1;
}
.addr-pick-cancle{
	color: #999999;
	width: 100upx;
}
.addr-pick-true{
	color: #409EFF;
}
</style>
